<template>
    <div class="selectCase-wrap">
      <dheader></dheader>
      <!-- offer-step-2 -->
      <div class="dh-container">
        <div class="offer-header cp-offer">
          <h2>
            <strong>{{params.plateNo}}</strong>
            <strong><i class="layui-icon layui-icon-location"></i>{{params.cityName}}</strong>
          </h2>
          <div class="offer-plan-info">
            <div class="info-item">
              <strong>险种选择</strong><span>(已选{{prevParam.insuranceListNums}}种)</span>
            </div>
            <div class="info-item">
              <strong>生效日期</strong>
              <div class="date-limit">
                <p>交强险: {{prevParam.jqQbTime}}</p>
                <p>商业险: {{prevParam.syQbTime}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="offer-form cp-form">
          <div class="offer-form-nothing" v-if="!companys.length">暂无数据!</div>
          <div class="layui-row form-row" v-else>
            <div class="layui-col-md6">
              <h3>报价方案</h3>
              <div v-for="(item, index) in companys" v-if="index % 2 === 0" :key="item.id" :id="item.id" class="layui-form-item plan-check">
                <div class="layui-inline plan-check-item">
                  <i :class="`layui-icon ${selectIndex === index ? 'layui-icon-ok-circle': 'layui-icon-circle'}`"></i>
                </div>
                <div class="layui-inline plan-check-item">
                  <img :src="prefixUrl + item.info">
                </div>
                <div class="layui-inline plan-check-item text-tr">
                  <h2>{{prevParam.totalPrice}}元</h2>
                  <p>赠送{{prevParam.couponType === '1' ? '充电券' : '--'}} {{prevParam.couponValue}}元</p>
                </div>
                <div class="layui-inline plan-check-item">
                  <button data-method="notice" :index="index"  class="layui-btn layui-btn-radius layui-btn-normal detailModal">详情</button>
                </div>
              </div>
            </div>
            <div class="layui-col-md6 no-h">
              <div v-for="(item, index) in companys" v-if="index % 2 > 0" :key="item.id" :id="item.id" class="layui-form-item plan-check">
                <div class="layui-inline plan-check-item">
                  <i :class="`layui-icon ${selectIndex === index ? 'layui-icon-ok-circle': 'layui-icon-circle'}`"></i>
                </div>
                <div class="layui-inline plan-check-item">
                  <img :src="prefixUrl + item.info">
                </div>
                <div class="layui-inline plan-check-item text-tr">
                  <h2>{{prevParam.totalPrice}}元</h2>
                  <p>赠送{{prevParam.couponType === '1' ? '充电券' : '--'}} {{prevParam.couponValue}}元</p>
                </div>
                <div class="layui-inline plan-check-item">
                  <button data-method="notice" :index="index" class="layui-btn layui-btn-radius layui-btn-normal detailModal">详情</button>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item submit-btn step-btn">
            <div class="offer-tip">如有疑问，请拨打客服热线：<a href="tel://0571-85233987">0571-85233987</a></div>
            <button type="button" @click.prevent.stop="goBack" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal goback">上一步</button>
            <button type="button" @click.prevent.stop="goNext" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">提交核保</button>
          </div>
        </div>
      </div>
      <!-- offer-step-2-end -->
    </div>
</template>

<script type="text/ecmascript-6">
  import dheader from './header';
  import { queryDictionaryList } from '../mock/mock';
  import mockHandler from '../mock/handler';
  import Functools from '../utils/functionTools';
  export default {
    name: 'selectCase',
    data () {
      return {
        identity: Functools.getSession('identity'),
        params: Functools.getSession('param'),
        companys: [],
        selectIndex: 0,
        prefixUrl: 'http://ccchong-isv.oss-cn-qingdao.aliyuncs.com/dhbx/',
        prevParam: {
          insuranceListNums: '--',
          jqQbTime: '--',
          syQbTime: '--'
        },
        offerId: ''
      }
    },
    components: {dheader},
    mounted () {
      this.prevParam = this.$route.query;
      this.initBxCompanys().then((res) => {
        if (res.code === 'success') {
          this.companys = res.data;
          this.offerId = this.companys[0].offerId;
        }
        const layui = window.layui;
        const that = this;
        let $ = null;
        layui.use(['form', 'layer'], function () {
          const [form, layer] = [layui.form, layui.layer];
          // 自定义切换checkbox
          $ = layui.jquery;
          that.$nextTick(() => {
            $('.plan-check-item').find('i').on('click', function () {
              if ($(this).hasClass('layui-icon-circle')) {
                $('.plan-check-item').find('i').removeClass('layui-icon-ok-circle').addClass('layui-icon-circle');
                $(this).removeClass('layui-icon-circle').addClass('layui-icon-ok-circle');
                that.offerId = $(this).parent().parent()[0].getAttribute('id');
              }
            });

            $('.detailModal').on('click', function () {
              const othis = $(this);
              const modalData = that.companys[othis[0].getAttribute('index')];
              const modaljq = JSON.parse(that.$route.query.priceInfo)[0].forces;
              const modalsy = JSON.parse(that.$route.query.priceInfo)[0].insurances;

              let [jqHtm, syHtm] = ['', ''];

              for (let jq of modaljq) {
                jqHtm += `<p><span>${jq.name}</span><span>${jq.quotesPrice}</span></p>`;
              }

              for (let sy of modalsy) {
                syHtm += `<p><span>${sy.name}</span><span>${sy.quotesPrice}</span></p>`;
              }

              const active = {
                notice: function () {
                  // 示范一个公告层
                  layer.open({
                    type: 1,
                    title: false, // 不显示标题栏
                    closeBtn: true,
                    area: '470px',
                    shade: 0.8,
                    id: 'LAY_layuipro', // 设定一个id，防止重复弹出
                    btnAlign: 'c',
                    moveType: 1, // 拖拽模式，0或者1
                    content: '<div class="modal-content"><h3>报价详情</h3>' +
                    '<h4>' + modalData.name + '</h4>' +
                    '<div class="modal-item"><label>交强险</label><div class="modal-val">' + jqHtm + '</div></div>' +
                    '<div class="modal-item"><label>商业险</label>' +
                    '<div class="modal-val">' +
                    syHtm +
                    '</div></div>' +
                    '<div class="modal-total"><strong>总计保费</strong><span><b>' + that.prevParam.totalPrice + '</b>元</span></div>' +
                    '</div>'
                  });
                }
              };
              const method = othis.data('method');
              if (active[method]) {
                active[method].call(this, othis);
              }
            });
          });
        });
       });
    },
    methods: {
      initBxCompanys () {
        return mockHandler(queryDictionaryList, Object.assign(this.identity, {
          type: 'INSURANCE_COMPANY'
        }));
      },
      goBack () {
        this.$router.back();
      },
      goNext () {
        this.$router.push({
          path: 'underwrite',
          query: Object.assign({offerId: this.offerId}, this.$route.query)
        });
      }
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
.offer-form-nothing
  text-align center
</style>
